<!--
 个人中心（我的）首页
 Created by xunyin
 CopyRight 讯音云商（厦门）科技有限公司  www.tonetn.com
-->
<template>
	<view class="userPage">
    <view v-if="$store.getters.token || userInfo.uid">
<!-- 		<view class="getUserBaseData header bg-color-red acea-row row-between-wrapper" v-if="!userInfo.avatar && !userInfo.nickname">
		  <button class="userDataBtn" v-if="canIUseGetUserProfile" @tap="getUserInfoProfile">授权并查看用户信息</button>
		  <button class="userDataBtn" v-else @getuserinfo="getUserInfo" open-type="getUserInfo">授权并查看用户信息</button>
		</view> -->
		<view class="headerBox">
			<view class="imgBox"><!-- https://shareadminapi.tonetn.com/file/pic/20221119162628950117.png -->
				<image :src="userInfo.avatar" mode=""></image>
				<view class="nameBox">
					<view class="name">
						<!-- {{userInfo.userName}} -->
						认准官方售前QQ：3594419785
					</view>
					<view class="userId">
						绑定号：{{userInfo.uid}}
						<view class="money" v-if="userGradeDiscount != 10">
							{{userGradeName}} 享受 {{userGradeDiscount}} 支付折扣
						</view>
					</view>
				</view>
			</view>
			<view class="msgNumBox">
				<view class="msgNum" @click="goPage('/pages/subPack/userPage/myCoupon')">
					<view class="num">
						{{userCouponNum}}
					</view>
					<view class="text">
						我的卡券
					</view>
				</view>
				<view class="msgNum" @click="goPage('/pages/subPack/userPage/balanceList')">
					<view class="num">
						{{sumUserBalance}}
					</view>
					<view class="text">
						我的余额
					</view>
				</view>
<!-- 				<view class="msgNum" @click="goPage('/pages/subPack/userPage/IntegralList')">
					<view class="num">
						{{info.integral}}
					</view>
					<view class="text">
						我的积分
					</view>
				</view> -->
			</view>
		</view>

		<view class="funsBox">
			<view class="FunBox" @click="goPage('/pages/subPack/discounts/details?nav=2')">
				<image src="../../static/images/tuango.png" mode=""></image>
				<text>团购验券</text>
			</view>
			<view class="FunBox" @click="goPage('/pages/subPack/userPage/myCoupon1')">
				<image src="../../static/images/tuango.png" mode=""></image>
				<text>我的优惠券</text>
			</view>
			<view class="FunBox" @click="goTabbar('/pages/orderList/orderList')">
				<image src="../../static/images/dingdan.png" mode=""></image>
				<text>预约订单</text>
			</view>
			<view class="FunBox" @click="goPage('/pages/shopmall/order/index')">
				<image src="../../static/images/dingdan.png" mode=""></image>
				<text>商城订单</text>
			</view>			
			<view class="FunBox" @click="goPage('/pages/subPack/userPage/commonProblem')">
				<image src="../../static/images/wenti.png" mode=""></image>
				<text>常见问题</text>
			</view>
			<view class="FunBox" @click="goPage('/pages/subPack/userPage/toJoin')">
				<image src="../../static/images/zhaoshang.png" mode=""></image>
				<text>招商加盟</text>
			</view>
			<view class="FunBox" @click="call()">
				<image src="../../static/images/kefu.png" mode=""></image>
				<text>官方技术客服</text>
			</view>			
<!-- 			<view class="FunBox" @click="goPage('/pages/subPack/userPage/leaveMessage')">
				<image src="../../static/images/liuyan.png" mode=""></image>
				<text>留言反馈</text>
			</view> 
			<view class="FunBox" @click="goPage('/pages/subPack/userPage/IntegralList')">
				<image src="../../static/images/jifen.png" mode=""></image>
				<text>积分订单</text>
			</view> -->
<!-- 			<view class="FunBox" @click="goPage('/pages/subPack/promotion/promotion')">
				<image src="../../static/tuiguang/fns-youhuijuan.png" mode=""></image>
				<text>推广中心</text>
			</view>
 			<view class="FunBox" @click="goPage('/pages/subPack/userPage/invites')">
				<image src="../../static/tuiguang/fns-yaoqing.png" mode=""></image>
				<text>邀请有礼</text>
			</view> -->
			<view class="FunBox" v-if="mtStaff.category == 1" @click="goPageShop('/pages/subPack/shop/shopIndex',mtStaff)" >
				<image src="../../static/tuiguang/fns-yaoqing.png" mode=""></image>
				<text>管理员入口</text>
			</view>
			<view class="FunBox" v-if="mtStaff.category == 2" @click="goPageShop('/pages/subPack/shop/shopIndex',mtStaff)" >
				<image src="../../static/tuiguang/fns-yaoqing.png" mode=""></image>
				<text>保洁员入口</text>
			</view>
						
		</view>
		<view class="kefuImageBox" v-if="kefuShow" @click="kefuShow = false">
			<image :src="kefuImage" mode="widthFix"></image>
		</view>
		
	</view>
    <Authorization v-else />		
	</view>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { getUserStat,
		 getUserInfo, 
		 getMenuUser, 
		 wxappAuth, 
		 bindingPhone, 
		 wxappBindingPhone, 
		 wxappGetUserInfo,
		 getUserGradeByUserId } from '@/api/user'
import { isWeixin, VUE_APP_RESOURCES_URL, parseQuery, getProvider } from '@/utils'	
	import {
		//UserInfo,
		UserPageKefu
	} from "../../utils/request/gather.js"
import Authorization from '@/pages/authorization/index'	
	export default {
	    components: {
		  Authorization,
	    },		
		data() {
			return {
				info: {}, // 用户信息
				kefuShow: false, // 客服层的显示
				kefuImage: "", // 客服图片路径
				//token: uni.getStorageSync("token"), // token
				canIUseGetUserProfile: false,
				isWeixin: false,
				userCouponNum:0,
				sumUserBalance:0,
				mtStaff:{},
				userGradeName:"",
				userGradeDiscount:10
			}
		},
		computed: mapGetters(['userInfo']),
		onLoad() {
			//this.userStat();
/* 			if (wx.getUserProfile) {
			  this.canIUseGetUserProfile = true
			} */
			//this.getUserInfo() // 获取用户信息
			//this.getKefu() // 获取联系客服信息
			console.log("onLoad")
			//console.log("userInfo.uid:"+userInfo.uid)
			//console.log("token:"+$store.getters.token)
		},
		mounted: function() {
			console.log("mounted")
			//console.log("userInfo.uid:"+userInfo.uid)
			//console.log("token:"+$store.getters.token)
		},		
		created() {
			console.log("created")
			//console.log("userInfo.uid:"+userInfo.uid)
			//console.log("token:"+$store.getters.token)			
			
		},
		onShow() {
			console.log("onShow")
			this.userStat();
			this.getKefu();
			// 获取用户会员对应的等级折扣
			this.getUserGrade();
			//console.log("userInfo.uid:"+userInfo.uid)
			//console.log("token:"+$store.getters.token)			
		},
		methods: {
		    ...mapMutations(['updateAuthorizationPage']),			
/* 			getUserInfo() { // 获取用户信息
				let data = uni.getStorageSync("userInfo")
				data = JSON.parse(data)
				this.info = data
			}, */
			userStat(){
				let param = {
					userId:this.userInfo.uid
				}
				getUserStat(param).then(res => {
					var userCouponNum = res.data.userCouponNum;
					var sumUserBalance = res.data.sumUserBalance;
					var mtStaff = res.data.mtStaff;
					this.userCouponNum =  userCouponNum;
					this.sumUserBalance = sumUserBalance;
					this.mtStaff = mtStaff;
					console.log("mtStaff:"+JSON.stringify(mtStaff));
				})
			},
			goPage(url) { // 跳转页面
/* 				if (!this.token) {
					uni.navigateTo({
						url: "/pages/Login/login"
					})
				} */
				uni.navigateTo({
					url
				})
			},			
			goPageShop(url,mtStaff) { // 跳转页面
/* 				if (!this.token) {
					uni.navigateTo({
						url: "/pages/Login/login"
					})
				} */
				
				url = url+'?category='+mtStaff.category+'&storeId='+mtStaff.storeId+'&mobile='+mtStaff.mobile;
					uni.navigateTo({
						url
				})
								
/* 				if(mtStaff.category===2){
					uni.requestSubscribeMessage({
						tmplIds: ["EZfzMbg9V8eXb8DZqzUwy7NZFvgYzRDWhnjIQW0ZIVM"],
						success(res) {
							console.log(res)
							url = url+'?category='+mtStaff.category+'&storeId='+mtStaff.storeId+'&mobile='+mtStaff.mobile;
							uni.navigateTo({
								url
							})
						},
						fail(error) {
							console.log(error)
						}
					})
				}else{
					url = url+'?category='+mtStaff.category+'&storeId='+mtStaff.storeId+'&mobile='+mtStaff.mobile;
					uni.navigateTo({
						url
					})
				} */ 

			},
			goTabbar(url) { // 跳转tabber页面
/* 				if (!this.token) {
					uni.navigateTo({
						url: "/pages/Login/login"
					})
				} */
				uni.switchTab({
					url
				})
			},
			// 申请获取用户信息
			getUserInfoProfile(data) {
			  wx.getUserProfile({
				lang: 'zh_CN',
				desc: '需要获取您的信息用来展示',
				success: res => {
				  uni.showLoading({
					title: '正在更新信息...',
					duration: 2000,
				  })
				  getProvider().then(provider => {
					// 环境提供商
					if (!provider) {
					  reject()
					}
					// 获取开发code
					uni.login({
					  provider: provider,
					  success: async loginRes => {
						wxappGetUserInfo({
						  encryptedData: res.encryptedData,
						  iv: res.iv,
						  code: loginRes.code, // 开发code
						}).then(res => {
						  if (res.status === 200) {
							this.userInfo.avatar = res.data.avatar
							this.userInfo.nickname = res.data.nickname
						  } else {
							uni.showLoading({
							  title: res.msg,
							  duration: 2000,
							})
						  }
						})
					  },
					})
				  })
				},
			  })
			},
			call() { // 拨打电话
				let phone = "19835690983"
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						uni.showToast({
							title: "拨打电话失败，请确认电话格式是否正确",
							icon: "none"
						})
					}
				})
			},						
			getKefu() { // 获取联系客服的信息
				let that = this
				UserPageKefu().then(res => {
					that.kefuImage = res.data.data.image
				})
			},
			getUserGrade(){
				let param = {}
				getUserGradeByUserId(param).then(res => {
					
					var mtUserGrade = res.data.mtUserGrade;
					if(mtUserGrade!=null){
						this.userGradeName = mtUserGrade.name;
						this.userGradeDiscount = mtUserGrade.discount;
					}
				})	
			},
		}
	}
</script>

<style>
	page {
		background: #f8f8fa;
	}
</style>

<style scoped lang="scss">
	.userPage {
		width: 100%;
		height: auto;

		.headerBox {
			width: calc(100% - 60rpx);
			height: auto;
			padding: 60rpx 30rpx;
			background: linear-gradient(#f1cf9f, #fff);

			.imgBox {
				display: flex;
				align-items: center;

				image {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}

				.nameBox {
					margin-left: 20rpx;

					.name {
						font-size: 28rpx;
						color: #333;
					}

					.userId {
						font-size: 24rpx;
						margin-top: 5rpx;
						color: #666666;
					}
				}
			}

			.msgNumBox {
				display: flex;
				margin-top: 40rpx;

				.msgNum {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.funsBox {
			width: 100%;
			height: auto;
			padding-top: 50rpx;
			background: #fff;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.FunBox {
				width: 25%;
				height: auto;
				display: flex;
				margin-bottom: 50rpx;
				flex-direction: column;
				align-items: center;

				image {
					width: 70rpx;
					height: 70rpx;
				}

				text {
					font-size: 28rpx;
				}
			}
		}

		.kefuImageBox {
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, .5);
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 75%;
				height: auto;
			}
		}
		
	}
</style>